<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="./css/iconfont/demo.css">
<link rel="stylesheet" href="./css/iconfont/iconfont.css">
<script type="text/javascript" src="./js/video.js"></script>
<div style="margin:10px 0px">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#addVideo').window('open')" id="btnUpload" style="width:300px;height:32px">上传视频</a>
</div>
<div style="margin:10px 0px">
    <table class="easyui-datagrid" id="itemList" title="视频列表"
           data-options="rownumbers:true, singleSelect:false,fitColumns: true,collapsible:false,pagination:true,url:'./video/getAll',method:'get',pageSize:30">
        <thead>
        <tr>
            <th data-options="field:'title',width:200">视频标题</th>
            <th data-options="field:'description',width:500">视频描述</th>
            <th data-options="field:'adminCreateTime',width:200, formatter:TAOTAO.formatDateTime">上传时间</th>
            <th data-options="field:'id', width:200, formatter:formatVideoProgress">操作</th>
        </tr>
        </thead>
    </table>
</div>
<div id="addVideo" class="easyui-window" title="添加商品视频" data-options="iconCls:'icon-save',closed:'true'" style="width:700px;height:500px;padding:5px;">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'center'" style="padding:10px;">
            <div style="margin-bottom:20px">
                <div>视频标题:</div>
                <input class="easyui-textbox" data-options="prompt:'请输入视频标题'" style="width:100%;height:32px"  id="title">
            </div>
            <div style="margin-bottom:20px">
                <div>视频描述:</div>
                <input class="easyui-textbox" data-options="multiline:true" style="width:100%;height: 250px" id="description"/>
            </div>
            <div style="margin-bottom:20px">
                <div>选择上传的视频文件:</div>
                <input class="easyui-filebox" data-options="prompt:'选择上传的视频文件...'" style="width:100%" id="uploadFile"/>
            </div>
        </div>
        <div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="addVideo()" style="width:80px">Ok</a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="$('#addVideo').window('close')" style="width:80px">Cancel</a>
        </div>
    </div>
</div>

<div id="playVideo" class="easyui-dialog" title="添加商品视频" data-options="closed:'true'" style="width:700px;height:500px;padding:5px;">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'center'" style="padding:10px;">
            <div style="margin-bottom:20px">
                <div>视频标题:</div>
                <div id="playTitle"></div>
            </div>
            <div style="margin-bottom:20px">
                <div>视频描述:</div>
                <div id="playDescription"></div>
            </div>
            <div style="margin-bottom:20px">
                <div>url地址:</div>
                <div id="playUrl"></div>
            </div>
            <div style="margin-bottom:20px">
                <div>视频文件:</div>
                <video controls>
                    <source id="playUrlOgg" type="video/ogg">
                    <source id="playUrlMp4" type="video/mp4">
                    <source id="playUrl3gpp" type="video/3gpp">
                    Your browser does not support the <code>video</code> element.
                </video>
            </div>
        </div>
        <div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="$('#playVideo').window('close')" style="width:80px">Ok</a>
        </div>
    </div>
</div>